<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我要投诉</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />


    <link rel="stylesheet" href="./public/css/ansicht.css">
    <!-- 阿里图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_461630_jcxm7ciaxtl9dx6r.css">
    <link rel="stylesheet" href="./public/css/self.css">



    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .upload{
            margin: 0;
            text-align: center;
        }
        .sub{
            margin-top: 20px;
            text-align: center;
        }
        .list{
            margin-top: 15px;
            padding: 0 10px;
        }
        .list li{
            width: 82px;
            height: 82px;
            border-radius: 3px;
            border:1px solid #DDD;
            padding: 5px;
            float: left;
            margin-right: 10px;
            position: relative;
            margin-bottom: 10px;
        }
        .list li img{
            width: 100%;
            height: 100%;
        }
        .close{
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0.8;
            cursor: pointer;
            background-color: #bbb;
            width: .7rem;
            line-height: .7rem;
        }
        .progressbox{
            padding: 0 10px;
            display: none;
        }
        .clearfix:after{
            content: '';
            clear:both;
            display: block;
            height: 0px;
            width: 100%;
        }
        .hidden{
            display: none;
        }
        .btn{
            background-color: #FFF;
            border-radius: 3px;
            border: 1px solid #DDD;
            padding: 6px 12px;
            outline: none;
            cursor: pointer;
        }
        .inputbox{
            margin: 10px 0;
        }
        .inputbox input{
            outline: none;
            border: 1px solid #DDD;
            border-radius: 3px;
            height: 36px;
            box-sizing: border-box;
            padding: 0 8px;
        }

        .loader{text-align:center}.loader,.loader>div{display:inline-block}.loader>div{width:16px;height:16px;background-color:#888;-webkit-animation:amt-bouncedelay 1.4s infinite ease-in-out both;animation:amt-bouncedelay 1.4s infinite ease-in-out both}.loader>div+div{margin-left:5px}.loader .loader-bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.loader .loader-bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes amt-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes amt-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.loader-rounded>div{border-radius:100%}.loader-primary>div{background-color:#0ab690}.loader-secondary>div{background-color:#3bb4f2}.loader-success>div{background-color:#5eb95e}.loader-warning>div{background-color:#f37b1d}.loader-alert>div{background-color:#dd514c}.loader-dark>div{background-color:#393939}.loader-white>div{background-color:#fff}

    </style>

</head>
<body>

<div class="page-group" id="content">
    <div class="page page-icons" id="page-from">
        <!--
                <header class="bar bar-nav">
                    <a class="button button-link button-nav pull-left back" href="complain.html">
                        <span class="iconfont icon-fanhui icon-left"></span>
                        返回
                    </a>
                    <h1 class="title">我要投诉</h1>
                </header>
        -->
        <div class="page-content self-list-block">
            <form method="post" action="" id="formData" enctype="multipart/form-data">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <!-- 隐式传递的值 -->                           
                            <input type="hidden" name="orderform" value="2"><!-- 来源0=书记1=县长2=投诉 -->
                            <!-- <input type="hidden" name="idcard" value="513">身份证 -->
                            <input type="hidden" name="isshow" value="1"><!-- 是否自愿公开 -->

                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">标题</div>
                                    <div class="item-input self-item-input">
                                        <input type="text" name="title" placeholder="请输入标题" onkeyup="getVal(this)"
                                               onblur="verifyInput(this)">
                                        <label class="self-icon-del iconfont icon-delete_fill"
                                               onclick="delVal(this)"></label>
                                    </div>

                                </div>
                            </div>
                        </li>
                        <!--
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">事发时间</div>
                                    <div class="item-input ">
                                        <input type="date" name="begintime" placeholder="请选择时间" value="2017-12-30">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">区域</div>
                                    <div class="item-input self-item-input">
                                        <input type="text" name="area" placeholder="请输入区域" onkeyup="getVal(this)">
                                        <label class="self-icon-del iconfont icon-delete_fill"  onclick="delVal(this)"></label>
                                    </div>
                                </div>
                            </div>
                        </li>
                         -->

                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">类型</div>
                                    <div class="item-input self-item-input">
                                        <select type="select" class="field" name="ordertype">
                                            <option value="10">咨询</option>
                                            <option value="15">建议</option>
                                            <option value="20">求助</option>
                                            <option value="25">表扬</option>
                                            <option value="30">举报</option>
                                            <option value="35">其他</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">身份证号</div>
                                    <div class="item-input self-item-input">
                                        <input type="text" name="idcard" placeholder="请输入身份证号" maxlength="18"  onkeyup="getVal(this)">
                                        <label class="self-icon-del iconfont icon-delete_fill"
                                               onclick="delVal(this)"></label>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">详细地址</div>
                                    <div class="item-input self-item-input">
                                        <input type="text" name="address" placeholder="请输入事件发生地址" onkeyup="getVal(this)">
                                        <label class="self-icon-del iconfont icon-delete_fill"
                                               onclick="delVal(this)"></label>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-inner item-border">
                                   <!-- <div class="item-title label">投诉内容</div>-->
                                    <div class="item-input self-item-input">
                                        <textarea name="content" placeholder="请描述具体投诉情况"
                                                  onkeyup="getVal(this)"></textarea>
                                        <label class="self-icon-del iconfont icon-delete_fill"
                                               onclick="delVal(this)"></label>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">添加图片</div>
                                    <div class="item-input">
                                        <div class="container" style="margin: 8px 0">
                                            <div class="upload">
                                                <div onclick="upimg()"></div>
                                                    <div class="upimg">
                                                        <div class="z_file"></div>
                                                        <input type="file" id="file"  multiple="multiple" style="width: 5rem; height: 5rem; opacity: 0; position: absolute;left:34%"/>

                                                        <ul class="list clearfix " style="padding-left: 0 !important;"></ul>
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">添加音频</div>
                                    <div class="item-input" style="position: relative; margin-bottom:0">
                                        <span id="upaudio" class="iconfont icon-notification"
                                              style="height:3rem;font-size: 2.5rem; color:#f2f2f2; position: absolute;top:-.3rem;left:.3rem"></span>
                                        <input id="audioInput" style="display: inline-block; height: 3rem;  opacity: 0;"
                                               type="file" name="file"/>
                                        <audio id="audio" controls autoplay style=" margin-top:.3rem; display: none; width: 99%"></audio>
                                        <div id="closeaudio" style="width:15px; height: 15px; position: absolute; background-color: #f1f1f1;top: .3rem;left: 0; display: none">X</div>

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">添加视频</div>
                                    <div class="item-input" style="position: relative; margin-bottom:0">
                                        <span id="upvedio" class="iconfont icon-video"
                                              style="height:3rem;font-size: 2.5rem; color:#f2f2f2; position: absolute;top:-.3rem;left:.3rem"></span>
                                        <input id="vedioInput" style="display: inline-block; height: 3rem;  opacity: 0"
                                               type="file" name="file"/>
                                        <video id="vedio"  style="width: 99%; margin-top: .45rem; display: none; height: 120px"
                                               controls></video>
                                        <div id="closevedio" style="width:15px; height: 15px; position: absolute; background-color: #f1f1f1;top: .3rem;left: 0; display:none ">X</div>

                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <a href="javascript:;" class="button button-big button-fill button-danger" onclick="verify();"
                       id="submit" interAPI="api/wxapi/workorder/addorders" type="0" style="display: none">提交</a>
                    <a href="javascript:;" class="button button-big button-nosumbit" id="submit-hui">提交</a>
                    <!-- 加载 -->
                    <div class="loader-box" id="bg" style="width: 100%; position: absolute; top:0; left: 0; background-color: #fff; opacity: .5; display: none">
                        <div class="loader loader-primary loader-rounded" style="margin: 85% 0 0 0; width: 100%">
                            <div class="loader-bounce1"></div>
                            <div class="loader-bounce2"></div>
                            <div class="loader-bounce3"></div>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>

<script src="./public/js/jquery-3.2.1.min.js?rand=272"></script>
<script src="./public/js/ansicht.js?rand=272"></script>
<script src="./public/js/self.js?rand=272"></script>

<script>
    //录音上传
    $(function () {
        $("#audioInput").change(function () {
            console.log(this.files[0].name)
            $("#closeaudio").show();
            var objUrl = getObjectURL(this.files[0]);
            $("#audio").attr("src", objUrl);
            $("#audio")[0].pause();
            $("#upaudio").hide();
            $("#audioInput").hide();
            $("#audio").show();
            $("#mp3_submit").show()
            getTime();
        });
        $("#vedioInput").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            $("#closevedio").show();
            $("#vedio").attr("src", objUrl);
            $("#vedio")[0].pause();
            $("#upvedio").hide();
            $("#vedioInput").hide();
            $("#vedio").show();
            $("#mp3_submit").show()
            getTime();
        });
    });

    <!--获取mp3文件的时间 兼容浏览器-->
    function getTime() {
        setTimeout(function () {
            var duration = $("#audio")[0].duration;
            if (isNaN(duration)) {
                getTime();
            }
            else {
                console.info("该歌曲的总时间为：" + $("#audio")[0].duration + "秒")
            }
        }, 10);
    }

    <!--把文件转换成可读URL-->
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    $(document).on('click','#closeaudio',function(){
        $("#closeaudio").hide();
        $("#audioInput, #upaudio").show();
        $("#audio").removeAttr("src").hide();
    });
    $(document).on('click','#closevedio',function(){
        $("#closevedio").hide();
        $("#vedioInput, #upvedio").show();
        $("#vedio").removeAttr("src").hide();
    });






</script>


<script type="text/javascript">

    localStorage.setItem('reopenid',getUrlParam("openid"));//提交成功后跳转用
    $(document).on('click','#file',function(){
        var lileng = $(".upimg .list li").length;
        if(lileng>3){
            alert("上传图片不能超过4张");
            return false;
        }
    });


    /*
    * 图片上传
    */
    var myfile = document.getElementById('file');
    var List = document.getElementsByClassName('list')[0];
    var closes = document.getElementsByClassName('close');
    var filearr = [];
    function upimg(){
        myfile.click();
    }
    myfile.onchange = function(){
        var files = this.files;
        if(!files.length) return;
        if(filearr.length>3){
            alert("上传图片不能超过4张");
            return;
        }
        for(var i = 0;i<files.length;i++){
            filearr.push(files[i]);
            var oLi = '<li><img src="'+URL.createObjectURL(files[i])+'"><span class="close" onclick="closeli(this)" >&times;</span></li>';
            List.innerHTML+=oLi;
        }
    }
    function closeli(obj){
        [].slice.call(closes).forEach(function(dom,index){
            if(obj === closes[index]){
                filearr.splice(index,1);
            };
        });
        parents(obj,'li').remove();
    }
    function parents(obj,node){
        if(obj.parentNode.tagName==node.toUpperCase()){
            return obj.parentNode;
        }else{
            return  parents(obj.parentNode,node);
        }
    }

    //遮罩层
    var doc = document.documentElement;
    relHeight = (doc.clientHeight > doc.scrollHeight) ? doc.clientHeight : doc.scrollHeight;//获取屏幕高度和当前页面高度中的较大值
    document.getElementById('bg').style.height = relHeight+'px';//id为bg的div就是我页面中的遮罩层

</script>
</body>
</html>
